<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="班组异常工时" name="first" lazy>
        <WorkTableVue v-if="tabName === 'first'" ref="first" :tabName=tabName />
      </el-tab-pane>
      <el-tab-pane label="部门异常工时" name="second" lazy>
        <WorkTableVue v-if="tabName === 'second'" ref="second" :tabName=tabName />
      </el-tab-pane>
      <el-tab-pane label="产线异常工时" name="third" lazy>
        <WorkTableVue v-if="tabName === 'third'" ref="third" :tabName=tabName />
      </el-tab-pane>
      <el-tab-pane label="研发异常工时" name="fourth" lazy>
        <WorkTableVue v-if="tabName === 'fourth'" ref="fourth" :tabName=tabName />
      </el-tab-pane>
      <el-tab-pane label="异常类别与频次" name="fifth" lazy>
        <WorkTableVue2 v-if="tabName === 'fifth'" ref="fifth" :tabName=tabName />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import WorkTableVue from './workTable.vue';
import WorkTableVue2 from './workTable2.vue';
export default {
  components: {WorkTableVue,WorkTableVue2},
  data() {
    return {
      activeName: 'first',
      tabName: 'first'
    };
  },
  mounted(){

  },
  methods: {
    handleClick(val){
      this.$nextTick(()=> {
        this.tabName = this.activeName
        console.log(this.activeName)
        // this.$refs[this.activeName].init()
      })
    },
  },
};
</script>
